<template>
    <div class="center">
        <div class="left">
            <el-icon>
            </el-icon>
            <span>数据列表</span>
        </div>
        <div class="right">
            <el-button @click="onAddUser">添加</el-button>
        </div>
    </div>
    <div class="bottom">
        <el-table :data="tableData" style="width: 100%" :border="true">
            <el-table-column prop="id" style="text-align: center;" label="编号" width="100">
            </el-table-column>
            <el-table-column prop="name" style="text-align: center;" label="秒杀时间段名称" width="334">
            </el-table-column>
            <el-table-column label="每日开启时间" width="332">
                <template #default="scope">
                    {{ scope.row.startTime
                        ? dayjs(scope.row.startTime
                        ).format('YYYY-MM-DD HH:mm:ss') : '' }}</template>
            </el-table-column>
            <el-table-column label="每日结束时间" width="332">
                <template #default="scope">
                    {{ scope.row.endTime
                        ? dayjs(scope.row.endTime
                        ).format('YYYY-MM-DD HH:mm:ss') : '' }}</template>
            </el-table-column>
            <el-table-column label="启用" width="169">
                <template #default="scope">
                    <el-switch :value="scope.row.status === 1 ? true : false" />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180" flex="right">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="bj(scope.row)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <Edit3 :visible="visible3" @cancel="oncancel" @sure="onsure" :form="modalForm" />
</template>

<script setup lang="ts">
import Edit3 from './Edit/Edit3.vue'
import { ref, onMounted } from 'vue'
import type { Ref } from 'vue'
import type { msAllRES } from '../../json/request/QmsAdminConreiller/index'
import *as api from '../../json/request/api'
import dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from "element-plus";
// let tableData = ref({})
let add = false; // false编辑 true 新增
interface List {
    id: number;
    name: string;
    startTime: string;
    endTime: string;
    status: number
}
let tableData = ref<List[]>([])
let modalForm = ref({}) as Ref<msAllRES>
onMounted(async () => {
    let res = await api.admin.msAll()
    console.log(res);
    tableData.value = res
})
// 弹出框3
let visible3 = ref(false)
// 添加用户

let onAddUser = () => {
    let newUser = {
        createTime: '',
        name: '',
        endTime: '',
        id: 0,
        status: 0,
        startTime: ''
    } as msAllRES;
    modalForm.value = newUser;
    add = true;
    visible3.value = true;
};
// 编辑
let bj = (row: msAllRES) => {
    add = false
    visible3.value = true
    modalForm.value = row
}
// 子组件传过来的事件3
// 取消
let oncancel = () => {
    visible3.value = false
}
// 确定
let onsure = (row: msAllRES) => {
    ElMessageBox.confirm("是否确认提交!", "提示", {
        confirmButtonText: "OK",
        cancelButtonText: "Cancel",
        type: "warning",
    })
        .then(async () => {
            if (add) {
                await api.admin.createQQ(row)
            }
        })

}
// del 删除
let del = (row: any) => {
    ElMessageBox.confirm("是否确认删除!", "提示", {
        confirmButtonText: "OK",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(async () => {
            await api.admin.delMS(row.id)
            location.reload()
        })
}
</script>

<style scoped lang="scss">
.center {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    padding: 20px;
    align-items: center;
}
</style>